<template>
  <div class="publishCon">
    <div class="resetTitle">
      <router-link tag="div" :to="{path:'/livingCircle',query:{'liv':livsu,'livsuType':livsuType}}" class="imgs"><span
          class="iconfont icon-fanhui"></span></router-link>
      <div class="resetText"></div>
    </div>
    <div style="width: 100%;height: 30px;"></div>
    <div class="editorCon">
      <van-form validate-first @submit="onSubmit()">
        <!-- 通过 pattern 进行正则校验 -->
        <div class="formItem">
          <div class="formItemBg">
            <!--            <p class="nameTitle">内容</p>-->
            <van-field
                style="height: 200px"
                v-model="textCon"
                type="textarea"
                placeholder="请输入"
                :rules="[{ required: true, message: '请填写内容' }]"
            />
          </div>
        </div>

        <div class="formItem">
          <div class="formItemBg padg">
            <p class="nameTitle">素材图片</p>
            <van-field>
              <template #input>
                <van-uploader v-model="fileList" multiple :after-read="afterRead">
                  <van-button type="primary">上传</van-button>
                </van-uploader>
              </template>
            </van-field>
          </div>
        </div>
        <div class="sub">
          <van-button round block type="info" native-type="submit">添加</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import {Toast} from "vant";
import comApi from "@/api/comapi";
import quanApi from '@/api/quan'
import cookie from 'js-cookie'

export default {
  name: "publishCon",
  data() {
    return {
      currentQuanType: '',
      recordActive: 0,
      textCon: '',
      livsuType:'',
      livsu:'',
      fileList: [],
      fileType: ['image/png', 'image/jpeg'],
    }
  },
  created() {
    this.currentQuanType = this.$route.query.currentQuanType
    // 未用
    this.recordActive = this.$route.query.recordActive
    let livsuaa = this.$route.fullPath.split('=')
    let livsuaass = livsuaa[1].split('&')
    console.log(livsuaa[2])
    this.livsu = livsuaa[2]
    console.log( this.livsu)
    console.log(livsuaass[0])
    this.livsuType = livsuaass[0]

  },
  methods: {
    afterRead(file) {
      if (this.fileType.indexOf(file.file.type) < 0) {
        Toast('请上传 jpg或png 格式图片');
        return false;
      }

      return true;
    },
    onSubmit(values) {
      if (this.fileList.length == 0) {
        Toast("请上传图片")
        return
      }
      // 走到这里 auth 一定登录了
      let config = {
        headers: {
          'Authorization': cookie.get('Authorization'),
          'Content-Type': 'multipart/form-data',
        }
      };
      const url = "http://pt.shengxue688.com/shengxue/oss/uploadArrayFile";
      let formData = new FormData();
      for (let i = 0; i < this.fileList.length; i++) {
        formData.append("files", this.fileList[i].file)
      }
      axios.post(url, formData, config)
          .then(res => {
            if (res.data.code == 200) {
              var pics = res.data.data.join(",");
              let data = {
                content: this.textCon,
                quanType: this.currentQuanType,
                sources: pics
              }
              quanApi.publicQuan(data).then(res => {
                Toast(res.message)
                let livsuaa1 = this.$route.fullPath.split('=')
                console.log(livsuaa1)
                let livsuaass1 = livsuaa1[1].split('&')
                console.log(livsuaass1[0])
                this.$router.push({path:'/livingCircle',query:{'livsuaass1':livsuaass1[0],'livsuaa1':livsuaa1[2]}})
              })

            } else {
              Toast('服务器错误');
            }


          })
          .catch(err => {
            Toast('服务器错误');
          })

    },
  }
}
</script>

<style lang="less" scoped>
.publishCon {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
}

.resetTitle {
  width: 100%;
  padding: 15px 0;
  position: relative;

  .imgs {
    position: absolute;
    left: 10px;
    top: 13px;

    span {
      font-size: 25px;
    }
  }

  .resetText {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
}

.editorCon {
  width: 100%;
  background: #ffffff;
  font-size: 14px;

  .formItem {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;

    .formItemBg {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding: 10px;
      line-height: 30px;

      /deep/ .van-field {
        flex: 1;
      }

      /deep/ .van-button--primary {
        background: #f8f5be;
        color: black;
        border: none;
        border-radius: 20px;
        height: 30px;
        line-height: 30px;
      }

      /deep/ .van-button--normal {
        padding: 5px 30px;
      }

      /deep/ .van-uploader__input-wrapper {
        left: 20px;
        position: fixed;
        top: 290px;
        left: 100px;
      }

      /*.ipt {*/
      /*  flex: 1;*/
      /*  padding-left: 20px;*/

      /*  .select {*/
      /*    width: 100%;*/
      /*    height: 30px;*/
      /*    border: none;*/

      /*    option {*/
      /*      height: 30px;*/
      /*    }*/
      /*  }*/
      /*}*/

      /deep/ .van-cell {
        padding: 0px;

        input {
          text-indent: 20px;
          height: 30px;
        }
      }

    }

    .padg {
      padding-top: 50px;

      .nameTitle {
        margin-right: 20px;
      }
    }

  }

  .sub {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding-bottom: 10px;

    .van-button {
      width: 95%;
      margin: 0 auto;
      background: #f8f5be;
      border: none;
      color: black;
    }
  }
}
</style>
